<template>
  <div id="noticePage">
    <div style="display: flex; justify-content: space-between">
      <!-- 搜索栏 -->
      <a-form layout="inline" :model="searchParam" @finish="doSearch">
        <a-form-item label="标题">
          <a-input v-model:value="searchParam.title" placeholder="请输入标题" allow-clear />
        </a-form-item>
        <a-form-item label="关键词">
          <a-input v-model:value="searchParam.keyword" placeholder="请输入关键词" allow-clear />
        </a-form-item>
        <a-form-item label="通知状态">
          <a-select v-model:value="searchParam.status" style="width: 120px">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">发布</a-select-option>
            <a-select-option :value="0">草稿</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit"> 搜索 </a-button>
        </a-form-item>
      </a-form>
      <a-button type="primary" size="large" @click="clickToAdd">新增通知</a-button>
    </div>
    <div style="margin-bottom: 32px"></div>
    <!-- 表格 -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      @change="doTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'picture'">
          <a-image :src="record.picture" :width="60" />
        </template>
        <template v-else-if="column.dataIndex === 'status'">
          {{ record.status === 1 ? '发布' : '草稿' }}
        </template>
        <template v-else-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH-mm-ss') }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" @click="clickToUpdate(record.id)">详情</a-button>
            <a-button type="primary" danger @click="doDelete(record.id)">删除</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { deleteNoticeUsingPost, listNoticeByPageUsingPost } from '@/api/noticeController.ts'
import router from '@/router'

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '图片',
    dataIndex: 'picture',
  },
  {
    title: '通知状态',
    dataIndex: 'status',
  },
  {
    title: '发布人',
    dataIndex: 'publisherName',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    key: 'action',
  },
]

// 定义数据
const dataList = ref<API.Notice[]>([])
const total = ref(0)

// 搜索条件
const searchParam = reactive<API.NoticeQueryRequest>({
  current: 1,
  pageSize: 10,
  title: '',
  keyword: '',
  status: '',
  publisherName: '',
})

// 分页参数
const pagination = computed(() => {
  return {
    current: searchParam.current,
    pageSize: searchParam.pageSize,
    total: total.value,
    showSizeChanger: true,
    showTotal: (total: number) => `共${total}条`,
  }
})

const doTableChange = (page: any) => {
  searchParam.current = page.current
  searchParam.pageSize = page.pageSize
  fetchData()
}

// 获取数据
const fetchData = async () => {
  const res = await listNoticeByPageUsingPost({
    ...searchParam,
  })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    message.error('获取数据失败' + res.data.message)
  }
}

// 页面加载时获取数据，请求一次
onMounted(() => {
  fetchData()
})

const doSearch = () => {
  // 重置页码
  searchParam.current = 1
  fetchData()
}

const doDelete = async (id: number) => {
  if (!id) {
    return
  }
  const res = await deleteNoticeUsingPost({ id: id })
  if (res.data.code === 0) {
    message.success('删除成功')
    // 刷新数据
    fetchData()
  } else {
    message.error('删除失败')
  }
}

const clickToAdd = () => {
  router.push('/notice/add')
}

const clickToUpdate = (id: number) => {
  router.push(`/notice/update/${id}`)
}
</script>

<style scoped></style>
